/**
  * 博客主的所有外链
  1. github
  2. email
  3. qq
  4. weixin
 */

<template>
  <ul class="Contact-content">
    <!-- github -->
    <li class="item">
      <a :href="data.github">
        <Icon type="github" />
        <div class="text">{{ data.githubName }}</div>
      </a>
    </li>

    <!-- 邮箱 -->
    <li class="item">
      <a :href="`mailto:${data.mail}`">
        <Icon type="mail" />
        <div class="text">{{ data.mail }}</div>
      </a>
    </li>
    <!-- qq -->
    <li class="item">
      <a :href="`tencent://message/?uin=${data.qq}`">
        <Icon type="qq" />
        <div class="text">{{ data.qq }}</div>
      </a>
      <div class="qr-code">
        <img :src="data.qqQrCode" alt="" />
      </div>
    </li>
    <!-- 微信 -->
    <li class="item">
      <a>
        <Icon type="weixin" />
        <div class="text">{{ data.weixin }}</div>
      </a>
      <div class="qr-code">
        <img :src="data.weixinQrCode" alt="" />
      </div>
    </li>
  </ul>
</template>

<script>
import Icon from "@/components/Icon";
import { mapState } from "vuex";
export default {
  components: {
    Icon,
  },
  computed: {
    ...mapState("setting", ["data"]),
  },
};
</script>

<style lang="less" scoped>
@import url("~@/style/var.less");
@import url("~@/style/global.less");
.Contact-content {
  margin: 30px auto;
  width: 100%;
  color: @lightWords;
  font-size: 14px;
  .item {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;

    a {
      cursor: pointer;
      display: flex;
      align-items: center;

      .text {
        margin-left: 5px;
      }
      &:hover + .qr-code {
        transform: translateY(-121%) scaleY(1);
      }
    }
    .qr-code {
      width: 200px;
      height: 200px;
      padding: 10px;

      background-color: #fff;
      border-radius: 10px;

      transform: translateY(-121%) scaleY(0);
      transform-origin: center bottom;
      transition: transform 0.5s;
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        bottom: 0;
        border: 10px solid transparent;
        border-top-color: #fff;

        transform: translateX(-50%) translateY(90%);
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    padding: 0;
    margin: 0;
  }
}

// 字体图标样式
.iconfont {
  font-size: 1.2rem;
}
</style>